<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/botMenu.css">
    <script src="js/jquery.js"></script>
    <script src="js/BotMenu.js"></script>
    <title>底部菜单Demo</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        li{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0;
            padding: 0;
        }

        .botListContent {
            width: 100%;
            flex-shrink: 0;
            overflow-y: auto;
        }

        .itemContent {
            width: 100%;
            height: 180px;
            background: salmon;
        }

        .line {
            width: 100%;
            height: 1px;
            background: white;
        }
    </style>
</head>

<body>
    <div class="botMenuContentInfo">
        <div id="openBotMenuid">开启底部</div>
        <div class="botMenuContent">
            <div class="botListContent">
                <ul>
                    <li>
                        <div class="itemContent">1</div>
                        <div class="line"></div>
                    </li>
                    <li>
                        <div class="itemContent">2</div>
                        <div class="line"></div>
                    </li>
                    <li>
                        <div class="itemContent">3</div>
                        <div class="line"></div>
                    </li>
                    <li>
                        <div class="itemContent">4</div>
                        <div class="line"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            $('#openBotMenuid').on('click', function () {
                botMenuFunc($('.botMenuContent'),function (state) {  
                    if(state){
                        console.log('开启了');
                    }else{
                        console.log('关闭了');
                    }
                    
                });
            });;

        });
    </script>
</body>

</html>